<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>		
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/back.js" type="text/javascript" charset="utf-8"></script>
		<title>修改密码</title>		
		<style type="text/css">
			header {
				padding: 15px 20px 5px 20px;
				background-color: red;
				color: white;
				margin-top: 0px;
			}			
			#form {
				margin-top: 30px;
				line-height: 44px;
				padding: 0px 20px 0px 20px;
			}
			
			#yzm {
				height: 39px;
				width: 198px;
				border: 0px solid;
			}
			
			#new-password1 {
				height: 39px;
				width: 198px;
				border: 0px solid;
			}
			
			#new-password2 {
				height: 39px;
				width: 198px;
				border: 0px solid;
			}
			
			hr {
				margin-top: 5px;
				border: 1px solid #E5E5E5;
			}
			
			#bottom-txt-style {
				margin-top: 10px;
			}
			
			#bootm-txt {
				font-size: 13px;
				/*控制最下面的文字*/
			}
		</style>
	</head>

	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="4" >
						<span @click="goBack"><返回</span>
					</van-col>
					<van-col span="17">修改登录密码</van-col>	
					<van-col span="3" >
						<span @click="confirm">确认</span>
					</van-col>					
				</van-row>			
			</header>
			<!--头部结束-->		

			<section>
				<div style="height: 13px; background-color: #E5E5E5;"></div>
				<van-row>
					<!--三个文本框开始-->
					<div id="form">
						<van-col span="16"><input type="text" name="" id="yzm" v-model="phonecode" placeholder="请输入验证码" /></van-col>
						<van-col span="8">
							<van-button type="danger" @click="fsyzm">发送验证码</van-button>
						</van-col>
						<van-col span="24">
							<hr/>
						</van-col>
						<van-col span="24">
							<input type="password" name="" id="new-password1" v-model="pws" placeholder="请输入新的登录密码" />
						</van-col>
						<van-col span="24">
							<hr/>
						</van-col>
						<van-col span="24">
							<input type="password" name="" id="new-password2" v-model="confirmpws" placeholder="请确认您的密码" />
						</van-col>
						<van-col span="24">
							<hr/>
						</van-col>
					</div>
				</van-row>
				<!--三个文本框结束-->

				<div id="bottom-txt-style">
					<!-- 最下面div样式-->
					<!--下面的文字div开始-->
					<van-col span="24">
						<span id="bootm-txt">(!)系统会自动向您已登录的手机号发送一条手机验证码</span>
					</van-col>
				</div>
				<!--下面的文字div结束-->

			</section>
			
		</div>
		<script type="text/javascript">			
			var vm=new Vue({
				el:"#app",
				data:{
					key:localStorage.getItem("keys"),
					phone:localStorage.getItem("phone"),
					confirmpws:"",
					pws:"",
					phonecode:""
				},
				methods:{
					fsyzm(){
						//发送验证码						
						ajax({
							url:"http://dsapi.ysd3g.com/API/SendChangePasswordCode",
							data:{
								key:vm.key								
							},
							dataType:"jsonp",
							success:function(res){
								if(res.Error==false){
									vm.$toast.success("您的验证码为"+res.Code);	
									vm.phonecode=res.Code;
								}else{
									vm.$toast.fail(res.Msg)
								}
							}
						})
					},
					confirm(){
						//确认修改按钮
						if(vm.phonecode==""||vm.pws==""||vm.confirmpws==""){
							vm.$toast.fail("请确保信息填写完整")
						}else if(vm.confirmpws!=vm.pws){
							vm.$toast.fail("请确保两次密码一致")
						}
						else{
							vm.$dialog.confirm({							 
							  message: '确认修改吗？'
							}).then(() => {
							  ajax({
							  	url:"http://dsapi.ysd3g.com/API/ChangePassword",
							  	data:{
							  		key:vm.key,
							  		password:vm.confirmpws,
							  		phoneCode:vm.phonecode
							  	},
							  	dataType:"jsonp",
							  	success:function(res){
							  		if(res.Error==false){
										vm.$dialog.alert({
										  message: '修改成功'
										}).then(() => {
										  localStorage.clear();//清除缓存
										  plus.webview.getWebviewById("grzx").reload(true);//刷新主页面	
										  var arr=plus.webview.currentWebview();									  
										  plus.webview.close(arr,"slide-out-right");
										});							  			
							  		}else{
							  			vm.$toast.fail(res.Msg)
							  		}
							  	}
							  })
							}).catch(() => {
							  vm.$toast("取消修改")
							});
							
						}
						
					},
					goBack(){
						var arr=plus.webview.currentWebview();
						plus.webview.close(arr,"slide-out-right");
					}
				}
			});
		</script>	
		
	</body>

</html>